<template>
  <table-form>
    <template slot="title">
      <h2 v-if="leaseData.renewFlag == 1" class="fromDivTit">续租成功</h2>
      <h2 v-else class="fromDivTit">出租成功</h2>
    </template>
    <div class="divZk">
      <ul>
        <li>
          <p><i>租金:</i>{{ leaseData.rent }} 澳币 / 周</p>
          <p><i>押金:</i>{{ leaseData.deposit }} 澳币</p>
        </li>
        <li>
          <p><i>起租日:</i>{{ dateFormat2(leaseData.beginDate) }}</p>
          <p><i>截止日:</i>{{ dateFormat2(leaseData.endDate) }}</p>
          <p><i>租期：</i>{{ leaseData.leaseTerm }}个月</p>
        </li>
      </ul>
    </div>
    <div class="divZk">
      <ul
        v-for="(item, index) in leaseData.renterList"
        :key="index"
        class="auto"
      >
        <li>
          <p>
            <i>租客{{ numTxt[index] }}:</i>
            <em>{{ item.name }}</em>
            <em>{{ genderFormat2(item.gender) }}</em>
            <em>{{ item.country }}</em>
            <em>{{ item.work }}</em>
            <em>{{ item.income }}</em>
          </p>
        </li>
      </ul>
      <ul>
        <li>
          <div>
            <i>附件:</i>
            <span
              v-for="(item, index) in getFileList(leaseData.filePath)"
              :key="index"
            ><a :href="leaseData.filePath.split(',')[index]" target="_blank">
              {{ item }}
            </a></span>
            <span v-if="!leaseData.filePath"> 无 </span>
          </div>
        </li>
        <li>
          <div class="remark-box">
            <i>备注:</i>
            <div>
              {{ leaseData.remark }}
            </div>
          </div>
        </li>
      </ul>
      <br>
      <br>
      <br>
      <br>
      <p class="pAll">
        <el-button
          type="text"
          :class="leaseData.status == 3 ? 'gray' : ''"
          @click="ofContract.show = true"
        >终止合约
        </el-button>
        <el-button
          type="text"
          :class="
            leaseData.renewFlag == 1 ||
              !leaseData.endDate ||
              leaseData.status == 1
              ? 'gray'
              : ''
          "
          @click="renewalObj.show = true"
        >续租</el-button>
        <el-button
          type="text"
          @click="cxlObj.show = true"
        >重新招租<i>|</i></el-button>
        <el-button
          type="text"
          :class="leaseData.step > 4 ? 'gray' : ''"
          @click="moveObj.show = true"
        >租客搬离</el-button>
      </p>
    </div>
    <template slot="footer">
      <div class="dialog-footer">
        <el-button type="primary" @click="nextList">返回列表</el-button>
      </div>
    </template>

    <!-- 终止合约 -->
    <myModal :obj="ofContract" @save="ofContractSave">
      <div class="mpdalBody">确认终止合约？</div>
    </myModal>
    <!-- 续租 -->
    <myModal :obj="renewalObj" @save="handleRenewl">
      <div class="mpdalBody">确认续租合约？</div>
    </myModal>
    <!-- 重新招租 -->
    <myModal :obj="cxlObj" @save="againLease">
      <div class="mpdalBody">确认重新招租？</div>
    </myModal>
    <!-- 租客搬离 -->
    <myModal :obj="moveObj" @save="tenantsMoveOut">
      <div class="mpdalBody">确认搬离？</div>
    </myModal>
  </table-form>
</template>
<script>
import TableForm from '../tableForm.vue'
import myModal from '@/components/Modal'
import { stopContract } from '@/api/lease'
import { renewal } from '@/api/lease'
import { move } from '@/api/lease'
import { leaseDetail, afreshLeasing } from '@/api/lease'
import { getFileList, dateFormat2, genderFormat2 } from '@/utils/common'

export default {
  components: {
    TableForm,
    myModal
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dateFormat2,
      genderFormat2,
      getFileList,
      numTxt: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
      genderTxt: ['男', '女'],
      leaseData: {
        renterList: [
          { name: '', gender: '', country: '', work: '', income: '' }
        ],
        filePath: '',
        renewFlag: ''
      },
      ofContract: {
        show: false,
        title: '提示',
        width: '647px'
      },
      renewalObj: {
        show: false,
        title: '提示',
        width: '647px'
      },
      cxlObj: {
        show: false,
        title: '提示',
        width: '647px'
      },
      moveObj: {
        show: false,
        title: '提示',
        width: '647px'
      }
    }
  },

  created() {
    this.getLeaseDetail()
  },
  methods: {
    async getLeaseDetail() {
      var leaseRes = await leaseDetail(this.id)
      this.leaseData = leaseRes.data
      if (this.leaseData.renewFlag == 1) {
        this.$store.commit('app/changeTitle', '续租成功')
      }
    },
    nextList() {
      this.$router.push({ path: 'lease' })
    },
    async tenantsMoveOut() {
      await move(this.id)
      this.$emit('next')
    },
    async againLease() {
      var houseId = this.leaseData.houseId
      var againRes = await afreshLeasing(houseId)
      if (againRes.code === 200) {
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
        const routerURl = this.$router.resolve({
          path: 'leasepageProcess',
          query: { id: againRes.data.id }
        })
        window.location.href = routerURl.href
        window.location.reload()
      }
    },
    async handleRenewl() {
      var processId = this.leaseData.renterList[0].processId
      var delRes = await renewal(processId)
      if (delRes.code === 200) {
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
        this.$emit('changeId', delRes.data.id)
        window.location.href = location.href.replace(
          /id=.*$/,
          `id=${delRes.data.id}`
        )
      }
      this.renewalObj.show = false
      // this.$emit('next', 2)
    },
    async ofContractSave() {
      var stopRes = await stopContract(this.id)
      if (stopRes.code === 200) {
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
        this.$router.push('lease')
      }
      this.ofContract.show = false
    }
  }
}
</script>
<style lang="scss" scoped>
.countFsColor {
  cursor: pointer;
}
.remark-box {
  display: flex;
  margin-top: 20px;
  div {
    width: 400px;
  }
  i {
    margin-top: 0 !important;
  }
}
.mpdalBody p {
  padding: 20px;
  text-align: center;
  font-size: 20px;
}
.myBnt {
  color: #5ac6b7;
  display: block;
  width: 100px;
  margin-left: 115px;
  margin-bottom: 20px;
  border: 0;
}
.divUl {
  margin: 0px auto 0 auto;
}
h5,
p {
  padding: 0;
  margin: 0;
}
.ulMy {
  flex-wrap: wrap;
  width: 166px;
  padding-left: 10px;
}
.ulMy li {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  height: 40px;
  line-height: 40px;
}
.ulMy li i {
  color: #6a6a6a;
  font-size: 13px;
  align-self: self-start;
  margin-top: 23px;
}
.ulMy li p {
  color: #6a6a6a;
  font-size: 13px;
}
.ulMy li h5 {
  font-size: 16px;
  color: #151515;
  margin-bottom: 10px;
}
.ulMy li div {
  background: #fff;
  margin-left: 0px;
  flex: 1;
  padding: 0px;
  box-sizing: border-box;
  border-radius: 2px;
  text-align: center;
  font-size: 12px;
}
.ulMy li em {
  color: #5ac6b7;
  margin-left: 3px;
}
.ulMy li dfn {
  color: #5ac6b7;
  margin-top: 3px;
  font-size: 12px;
  display: block;
  margin-top: 10px;
}
.ulMy li.not {
  color: #ccc;
}
.ulMy li.not h5 {
  font-size: 16px;
  color: #ccc;
  margin-bottom: 10px;
}
.ulMy li.not div {
  background: #fff;
  margin-left: 0px;
  flex: 1;
  padding: 0px;
  box-sizing: border-box;
  border-radius: 2px;
}
.ulMy li.not p {
  color: #ccc;
}
.overview-content {
  min-height: calc(100vh - 160px);
  background: #eee;
}
.myDigo h2 {
  background: #343436;
}
::v-deep .myDigo .el-dialog__footer {
  background: #e5e9ed;
  padding-top: 15px;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog.myDigo .el-dialog__header {
  display: none;
}
.el-dialog.myDigo h2 {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 39px;
  padding-right: 39px;
  color: #fff;
  font-size: 18px;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
  font-weight: normal;
  font-family: "SourceHanSansSC-regular";
}
.el-dialog.myDigo h2 i {
  font-size: 26px;
  cursor: pointer;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  text-align: left;
}
.formDiv {
  padding-left: 39px;
  padding-right: 39px;
  background: #fff;
  overflow: hidden;
}
.divSE {
  text-align: center;
}
.divSE em {
  display: block;
}
.fileWD {
  font-size: 46px;
  color: #5ac6b7;
}
.titleDiv {
  background: #5ac6b7;
  padding-left: 20px;
  color: #fff;
  height: 60px;
  line-height: 60px;
}
.two {
  margin: 10px 0;
  font-size: 13px;
  padding-left: 10px;
  padding-right: 10px;
}
.overview-tabs {
  background: #6a6a6a !important;
}
.inputTop {
  display: flex;
  justify-content: space-between;
}
.el-upload__tip {
  display: inline-block;
}
.formdiv {
  width: calc(100% - 200px);
}
.p1 {
  font-size: 12px;
  color: #d0d0d0;
}
.addBntLease p {
  display: inline-block;
  width: 68px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #5ac6b7;
  cursor: pointer;
  border: 1px solid #5ac6b7;
  border-radius: 3px;
  font-size: 14px;
  margin-right: 10px;
}
.ulLeaseBnt li {
  background: #f8fbfa;
  border-radius: 6px;
  margin-top: 10px;
  font-size: 12px;
  display: flex;
  box-sizing: border-box;
  padding: 20px;
  flex-wrap: wrap;
}
.ulLeaseBnt li div.left {
  color: #666;
  width: 110px;
  text-align: left;
}
.ulLeaseBnt li div.left p {
  margin-bottom: 10px;
}
.ulLeaseBnt li div.left p:nth-child(1) {
  color: #5ac6b7;
  font-size: 13px;
}
.ulLeaseBnt li div.right p i {
  display: block;
  margin-bottom: 8px;
}
.ulLeaseBnt li div.right dfn {
  margin-top: 20px;
  display: block;
  color: #5ac6b7;
}
.ulLeaseBnt li div.line {
  border-top: 1px solid #f0f0f0;
  display: block;
  width: 100%;
  margin-top: 13px;
  padding-top: 22px;
  padding-left: 110px;
  box-sizing: border-box;
}
.ulLeaseBnt li div.line dfn {
  margin-right: 10px;
  color: #5ac6b7;
}
.ulLeaseBnt li:last-child {
  margin-bottom: 20px;
}
.opdfn {
  position: absolute;
  right: -12px;
  top: 0px;
  z-index: 99;
}
.agg {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.addAgg {
  color: #5ac6b7;
}
.fromDivArr {
  margin-bottom: 10px;
  overflow: hidden;
}
.divZk {
  margin-bottom: 20px;
  margin-left: 40px;
  margin-top: 30px;
}
.divZk ul li {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.divZk ul li {
  color: #101010;
  font-size: 12px;
  width: 100%;
}
.divZk ul li i {
  color: #b3b3b3;
  width: 50px;
  text-align: right;
  display: inline-block;
  margin-right: 10px;
  margin-top: 20px;
}
.divZk ul li p {
  width: 33.3%;
  text-align: left;
  margin-top: 10px;
}
.divZk ul.auto li {
  width: auto;
}
.divZk ul.auto li {
  flex-wrap: wrap;
}
.divZk ul.auto li p {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
.divZk ul.auto li p em {
  margin-right: 20px;
}
.divZk ul li span {
  color: #5ac6b7;
}
.pAll {
  font-size: 12px;
  color: #5ac6b7;
}
.pAll span {
  margin-right: 15px;
}
.pAll span i {
  margin-left: 15px;
}
.dialog-footer {
  margin-left: 800px;
}
.gray {
  color: gray !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
</style>
